<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon"  th:href="@{/chqimage/favicon.ico}" type="image/x-icon">
    <title>我的调解</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" th:href="@{/m-css/m-personal.css}">
    <script type="text/javascript" th:src="@{/chqjs/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/chqjs/vue.min.js}"></script>
</head>
<body>
    <!--顶部标题-->
    <div id="head">
        <a href="#" class="return_img float_left"><img src="/m-image/icon-fanhui.png" alt=""></a>
        <p class="head_title">我的调解</p>
    </div>
    <!--个人中心-->
    <div id="personal_box">
        <!--个人信息-->
        <div id="per_info">
           <p class="per_info_touxiang"><img :src="mediator.picture" alt=""></p>
            <p class="per_info_name">{{mediator.name}}</p>
            <p class="per_info_phone"><span>{{mediator.phone_num}}</span></p>
        </div>
        <!--调解事件数量-->
        <div id="per_num">
            <div class="num_box">
                <p class="num"><span>{{mediator.success_mediated_count}}</span>&nbsp;件</p>
                <p class="num_event">调解成功</p>
            </div>
            <div class="num_box">
                <p class="num"><span>{{mediator.failed_ediated_count}}</span>&nbsp;件</p>
                <p class="num_event">调解失败</p>
            </div>
            <div class="num_box">
                <p class="num"><span>{{mediate_rate}}</span>&nbsp;%</p>
                <p class="num_event">调解率</p>
            </div>
        </div>
        <!--调解状态-->
        <div id="per_state">
            <div class="state" @click="mymediate(0)">
                    <p class="state_img"><img src="/m-image/icon-qingqiu.png" alt=""></p>
                    <p class="state_info">调解请求</p>
            </div>
            <div class="state"  @click="mymediate(1)">
                    <p class="state_img"><img src="/m-image/icon-zhengzai.png" alt=""></p>
                    <p class="state_info">正在调解</p>
            </div>
            <div  class="state"  @click="mymediate(2)">
                    <p class="state_img"><img src="/m-image/icon-lishi.png" alt=""></p>
                    <p class="state_info">历史调解</p>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el:'#personal_box',
            data:{
                mediator:'',
                mediate_rate:''
            },
            mounted:function () {
                var _that = this;
                this.$nextTick(function () {
                    $.ajax({
                        url:'/mediator/showMediatorInfo',
                        type:'get',
                        datatype:'json',
                        success:function (result) {
                            _that.mediator = result;
                            console.log(_that.mediator);
                            var rate = parseFloat((result.success_mediated_count) * 100 / (result.success_mediated_count + result.failed_ediated_count));
                            _that.mediate_rate = rate.toFixed(2);//计算调解率，取小数点后两位
                        },
                        error:function (err) {
                            console.log(err);
                        }
                    })
                })
            },
            methods:{
                mymediate:function (state_num) {
                    window.location.href = '/mediator/to_mymediate?'+state_num;

                }
            }
        })
    </script>
</body>
</html>